<template>
  <view class="page index-page">
    <!-- 头部区域 -->
    <HeadBox :avatar="userInfo.avatar" :userName="userInfo.nick_name"
      :userLevel="userInfo.level" :goldAmount="Number(userInfo.coin).toFixed(2) || '0.00'"
      :utsdAmount="Number(userInfo.usdt_balance).toFixed(2) || '0.00'" @head-click="handleHeadClick" />

    <!-- 分享和礼物区域 -->
    <ShareGift :key="'share-' + currentLanguageIndex" @share="handleShare" @gift="handleGift" />

    <!-- 弹窗组件 -->
    <!-- 头部弹窗 -->
    <uni-popup ref="headPopup" type="center">
      <view class="head-popup">
        <!-- 关闭按钮 -->
        <image class="close-img" src="/static/img/close.png" mode="aspectFill" @click="closeHeadPopup"></image>

        <!-- 标题 -->
        <view class="title">{{ $t('user.information', 'Information') }}</view>

        <!-- 内容区域 -->
        <view class="contents">
          <!-- 头像 -->
          <view class="lists flex-lr">
            <view>{{ $t('user.avatar', 'Avatar') }}</view>
            <view class="flex-r">
              <view class="head-img-wrap" @click="handleSetAvatar">
                <image class="img"
                  :src="userInfo.avatar || '/static/img/head.png'"
                  mode="aspectFill">
                </image>
              </view>
              <image class="right-icon" src="/static/img/arrow-right.png" mode="aspectFill"></image>
            </view>
          </view>

          <!-- 昵称 -->
          <view class="lists flex-lr" @click="handleOpenSetNamePopup">
            <view>{{ $t('user.nick_name', 'Nick name') }}</view>
            <view class="flex-r">
              <view class="text">{{ userInfo.nick_name }}</view>
              <image class="right-icon" src="/static/img/arrow-right.png" mode="aspectFill"></image>
            </view>
          </view>

          <!-- 用户ID -->
          <view class="lists flex-lr">
            <view>{{ $t('user.user_id', 'User ID') }}</view>
            <view class="flex-r text">{{ userInfo.user_id }}</view>
          </view>

          <!-- 房屋等级 -->
          <view class="lists flex-lr">
            <view>{{ $t('user.house_grade', 'House grade') }}</view>
            <view class="flex-r">
              <image class="level-img" :src="`/static/img/level${userInfo.level}.png`" mode="aspectFill"></image>
            </view>
          </view>

          <!-- 钱包余额 -->
          <view class="lists flex-lr">
            <view>{{ $t('user.wallet_balance', 'wallet balance') }}</view>
            <view class="flex-r text">{{ userInfo.goldAmount }}</view>
          </view>

          <!-- 邀请码 -->
          <view class="lists flex-lr">
            <view>{{ $t('user.invitation_code', 'Invitation code') }}</view>
            <view class="flex-r text">{{ userInfo.recommend_code }}</view>
          </view>

          <!-- 设置 -->
          <view class="lists flex-lr" @click="handleOpenSetBGMPopup">
            <view>{{ $t('user.set_up', 'Set up') }}</view>
            <view class="flex-r">
              <image class="set-img" src="/static/img/icon-setting.png" mode="aspectFill"></image>
              <image class="right-icon" src="/static/img/arrow-right.png" mode="aspectFill"></image>
            </view>
          </view>
        </view>

        <!-- 底部按钮 -->
        <view class="flex-center">
          <view class="cancel-btn" @click="handleLogout">{{ $t('auth.logout', 'Log out') }}</view>
        </view>
      </view>
    </uni-popup>
    <!-- 设置昵称 -->
    <uni-popup ref="setNamePopup" type="center">
      <view class="pup-box model-content">
        <image src="/static/img/close.png" class="close-img" @click="closeSetNamePopup" />
        <view class="title">{{ $t('user.set_nickname', 'Set nickname') }}</view>
        <view class="contents">
          <view class="inp-wrap flex-lr">
            <input class="input" maxlength="140" enterkeyhint="done" autocomplete="off" v-model="nickname" />
            <image class="img" src="/static/img/icon-delete.png" @click="clearNickname" />
          </view>
        </view>
        <view class="flex-center">
          <view class="btn cancel-btn" @click="closeSetNamePopup">{{ $t('common.cancel', 'Cancel') }}</view>
          <view class="btn define-btn" @click="confirmNickname">{{ $t('common.define', 'Define') }}</view>
        </view>
      </view>
    </uni-popup>
    <!-- 设置背景音乐 -->
    <uni-popup ref="setBGM" type="center">
      <view class="bgm-pup-box model-content">
        <image src="/static/img/close.png" class="close-img" @click="closeSetBGMPopup" />
        <view class="title">{{ $t('user.set_up', 'Set up') }}</view>
        <view class="contents">
          <view class="flex-l volume-step"></view>
          <view class="flex-l music-box">
            <view class="">{{ $t('user.background_music', 'Background music') }}</view>
            <view class="val-kuang flex-center" @click="handleSetBGM">
              <image v-if="isSetBGM" src="/static/img/check.png" class="select-img" />
            </view>
          </view>
          <!-- 语言选择 -->
          <!-- <view class="flex-l language-box">
            <view class="">{{ $t('common.language', 'Language') }}</view>
            <picker mode="selector" :range="languageOptions" :range-key="'nativeName'" :value="currentLanguageIndex" @change="handleLanguageChange">
              <view class="language-selector">
                {{ currentLanguageName }}
              </view>
            </picker>
          </view> -->
        </view>
        <view class="flex-center">
          <view class="btn">{{ $t('auth.sign_out', 'Sign out') }}</view>
        </view>
      </view>
    </uni-popup>
    <!-- 退出登录弹窗 -->
    <uni-popup ref="signOutPopup" type="center">
      <view class="sign-out-pup-box model-content">
        <image src="/static/img/close.png" class="close-img" @click="closeSignOutPopup" />
        <view class="title">{{ $t('auth.sign_out', 'Sign out') }}</view>
        <view class="contents">
          <view class="text">{{ $t('auth.exit_login', 'Exit login?') }}</view>
        </view>
        <view class="flex-center">
          <view class="btn cancel-btn" @click="closeSignOutPopup">{{ $t('common.cancel', 'Cancel') }}</view>
          <view class="btn define-btn" @click="confirmSignOut">{{ $t('auth.logout', 'Out') }}</view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="popup5"></uni-popup>
    <uni-popup ref="popup6"></uni-popup>
    <uni-popup ref="popup7"></uni-popup>

    <!-- 公告区域 -->
    <BulletinBox :key="'bulletin-' + currentLanguageIndex" @bulletin="handleBulletin" />
    <uni-popup ref="bulletinPopup"></uni-popup>

    <!-- 房屋区域 -->
    <HouseBox :key="'house-' + currentLanguageIndex" @house="handleHouse" />
    <uni-popup ref="housePopup1"></uni-popup>
    <uni-popup ref="housePopup2"></uni-popup>
    <uni-popup ref="housePopup3"></uni-popup>
    <uni-popup ref="housePopup4"></uni-popup>

    <!-- 车辆区域 -->
    <CarBox :key="'car-' + currentLanguageIndex" />

    <!-- 商店区域 -->
    <StoreBox :key="'store-' + currentLanguageIndex" @store="handleStore" />
    <uni-popup ref="storePopup1"></uni-popup>
    <uni-popup ref="storePopup2"></uni-popup>
    <uni-popup ref="storePopup3"></uni-popup>
    <uni-popup ref="storePopup4"></uni-popup>
    <uni-popup ref="storePopup5"></uni-popup>

    <!-- 田地区域 -->
    <FieldBox :key="'field-' + currentLanguageIndex" ref="fieldBox" @field-click="handleFieldClick" />
    <uni-popup ref="fieldPopup1"></uni-popup>
    <uni-popup ref="fieldPopup2"></uni-popup>

    <!-- 背包区域 -->
    <BackpackBox :key="'backpack-' + currentLanguageIndex" @backpack="handleBackpack" />
    <uni-popup ref="backpackPopup1"></uni-popup>
    <uni-popup ref="backpackPopup2"></uni-popup>

    <!-- 底部区域 -->
    <FootBox :key="'foot-' + currentLanguageIndex" @tab-click="handleTabClick" @friend-list="handleFriendList" />

    <!-- 加载器 -->
    <!-- <Loader :show="showLoader" /> -->
    <loader />

    <!-- 客服区域 -->
    <CustomerService />
  </view>
</template>

<script>
import { userApi } from '@/request/user.js'
import projectConfig from '@/config/project.json'
import {
  HeadBox,
  ShareGift,
  BulletinBox,
  HouseBox,
  CarBox,
  StoreBox,
  FieldBox,
  BackpackBox,
  FootBox,
  Loader,
  CustomerService,
} from "./components/index.js";
import { mapActions, mapState, mapMutations } from 'vuex'
import { API_CONFIG } from '@/config/api.js'
import { systemApi } from '@/request/system'
import { languageMixin } from '@/utils/language-mixin.js'
import { languageManager } from '@/utils/language.js'

export default {
  name: "Home",
  mixins: [languageMixin],
  components: {
    HeadBox,
    ShareGift,
    BulletinBox,
    HouseBox,
    CarBox,
    StoreBox,
    FieldBox,
    BackpackBox,
    FootBox,
    Loader,
    CustomerService,
  },
  computed: {
    ...mapState('user', ['userInfo', 'token']),
    ...mapState('app', ['systemConfig']),
    
    // 当前语言名称
    currentLanguageName() {
      const currentLang = this.getCurrentLanguage()
      const langOption = this.languageOptions.find(lang => lang.code === currentLang)
      return langOption ? langOption.nativeName : 'English'
    }
  },
  data() {
    return {
      showLoader: false,
      isSetBGM: false,
      nickname: "",
      // 添加背景音乐实例
      backgroundMusic: null,
      storeItems: [
        { image: '/static/img/item1.png', count: 10, price: '100' },
        { image: '/static/img/item2.png', count: 5, price: '50' },
        { image: '/static/img/item3.png', count: 20, price: '200' },
      ],
      projectConfig,
      languageOptions: [],
      currentLanguageIndex: 0,
    };
  },
  async mounted() {
    await this.fetchUserInfo()
    await this.setupLanguageIfNeeded()
    await this.fetchLanguagePack()
    await this.getSystemConfig()
    this.initializeLanguageOptions()
  },
  methods: {
    ...mapActions('user', ['setUserInfo', 'setNickName', 'setUserAvatar', 'loadLanguagePack']),
    ...mapActions('app', ['getSystemConfig']),
    async fetchUserInfo() {
      try {
        const res = await userApi.getUserInfo()
        if (res && res.code === 200) {
          const info = res.data
          console.log('info', info)
          await this.setUserInfo(info)
          // this.nickname = info.nick_name
          // 根据API文档的返回数据结构更新用户信息
          // this.userInfo.userName = info.name || ''
          // this.userInfo.avatar = projectConfig.imgPrefix + info.avatar || ''
          // this.userInfo.userLevel = String(info.level || '')
          // this.userInfo.goldAmount = info.coin || '0.00'
          // this.userInfo.utsdAmount = info.usdt_balance || '0.00'
          // this.userInfo.recommendCode = info.recommend_code || ''
        }
      } catch (e) {
        console.error('Failed to get user information', e)
      }
    },
    async fetchLanguagePack() {
      try {
        // await this.loadLanguagePack()
        await languageManager.loadLanguagePack()
      } catch (error) {
        console.error('Failed to load language pack:', error)
      }
    },
    // 头部点击处理
    handleHeadClick() {
      this.$refs.headPopup.open();
    },

    // 关闭头部弹窗
    closeHeadPopup() {
      this.$refs.headPopup.close();
    },

    // 退出登录
    handleLogout() {
      this.closeHeadPopup();
      this.$refs.signOutPopup.open();
    },

    // 关闭退出登录弹窗
    closeSignOutPopup() {
      this.$refs.signOutPopup.close();
    },

    // 确认退出登录
    async confirmSignOut() {
      console.log("Confirm logout");
      const res = await userApi.logout()
      if (res && res.code === 200) {
        // res.msg && uni.showToast({ title: res.msg, icon: 'none' })
        uni.reLaunch({
          url: '/pages/index/index'
        })
        this.closeSignOutPopup()
      }
      this.closeSignOutPopup();
      // 这里可以添加退出登录的具体逻辑
    },

    // 设置昵称
    handleOpenSetNamePopup() {
      this.closeHeadPopup()
      this.nickname = this.userInfo.nick_name
      this.$refs.setNamePopup.open();
    },

    // 关闭设置昵称弹窗
    closeSetNamePopup() {
      this.$refs.setNamePopup.close();
    },

    // 清除昵称
    clearNickname() {
      this.nickname = "";
    },

    // 确认昵称
    async confirmNickname() {
      if (!this.nickname) {
        uni.showToast({ title: this.$t('user.nickname_cannot_be_empty', 'Nickname cannot be empty'), icon: 'none' })
        return
      }
      try {
        const payload = { userId: Number(this.userInfo.user_id), nickName: this.nickname }
        const res = await userApi.updateNickName(payload)
        if (res && res.code === 200) {
          uni.showToast({ title: this.$t('user.update_nickname_success', 'Update nickname successfully'), icon: 'none' })
          this.setNickName(this.nickname)
          this.closeSetNamePopup()
        }
      } catch (e) {
        console.error('Failed to update nickname', e)
      }
    },

    // 设置头像
    handleSetAvatar() {
      console.log('Set avatar')
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          console.log(res)
          const filePath = res.tempFilePaths[0]
          uni.uploadFile({
            url: API_CONFIG.BASE_URL + API_CONFIG.ENDPOINTS.FARM.UPLOAD_AVATAR,
            filePath,
            name: 'file',
            header: {
              'x-token': uni.getStorageSync('x-token')
            },
            success: (res) => {
              console.log('Upload avatar successfully', res)
              if (res && res.statusCode === 200 && res.errMsg === "uploadFile:ok") {
                this.setUserAvatar(JSON.parse(res.data.replace('\'', '')).data)
              }
            },
            fail: (err) => {
              console.log('Upload avatar failed', err)
            },
            complete: () => {
            }
          })
        }
      })
    },

    // 设置背景音乐
    handleOpenSetBGMPopup() {
      this.closeHeadPopup()
      this.$refs.setBGM.open();
    },

    // 关闭设置背景音乐
    closeSetBGMPopup() {
      this.$refs.setBGM.close();
    },

    // 设置背景音乐
    handleSetBGM() {
      this.isSetBGM = !this.isSetBGM;
      
      if (this.isSetBGM) {
        this.playBackgroundMusic();
      } else {
        this.stopBackgroundMusic();
      }
    },

    // 播放背景音乐
    playBackgroundMusic() {
      try {
        // 停止当前播放的音频（如果有）
        this.stopBackgroundMusic();
        
        // 创建新的音频实例
        this.backgroundMusic = uni.createInnerAudioContext();
        
        // 设置音频源
        this.backgroundMusic.src = '/static/media/bgmusic.mp3';
        
        // 设置循环播放
        this.backgroundMusic.loop = true;
        
        // 设置音频播放完成事件
        this.backgroundMusic.onEnded(() => {
          console.log('Background music playback completed');
        });
        
        // 设置音频播放错误事件
        this.backgroundMusic.onError((error) => {
          console.error('Background music playback failed:', error);
          uni.showToast({
            title: 'Audio playback failed',
            icon: 'none'
          });
          this.isSetBGM = false;
        });
        
        // 开始播放
        this.backgroundMusic.play();
        
        console.log('Start playing background music');
      } catch (error) {
        console.error('Failed to create audio context:', error);
        this.isSetBGM = false;
      }
    },

    // 停止背景音乐
    stopBackgroundMusic() {
      if (this.backgroundMusic) {
        try {
          this.backgroundMusic.stop();
          this.backgroundMusic.destroy();
          this.backgroundMusic = null;
          console.log('Stop background music');
        } catch (error) {
          console.error('Failed to stop background music:', error);
        }
      }
    },

    // 分享处理
    handleShare() {
      console.log("分享功能");
    },

    // 礼物处理
    handleGift() {
      console.log("礼物功能");
    },

    // 公告处理
    handleBulletin() {
      console.log("公告功能");
    },

    // 房屋处理
    handleHouse() {
      console.log("房屋功能");
    },

    // 商店处理
    handleStore() {
      console.log("商店功能");
    },

    // 田地点击处理
    handleFieldClick(index) {
      console.log("田地点击:", index);
    },

    // 背包处理
    handleBackpack() {
      console.log("背包功能");
    },

    // 标签页点击处理
    handleTabClick(tab) {
      console.log("标签页点击:", tab);
    },

    // 好友列表处理
    handleFriendList() {
      console.log("好友列表功能");
    },

    // 关闭仓库弹窗
    closeStoreHousePopup() {
      this.$refs.storeHousePopup.close();
    },

    // 升级处理
    handleUpgrade() {
      console.log("升级功能");
      this.closeStoreHousePopup();
    },

    // 设置头像
    handleOpenSetAvatarPopup() {
      this.closeHeadPopup()
      this.$refs.setAvatarPopup.open();
    },

    // 初始化语言选项
    initializeLanguageOptions() {
      this.languageOptions = this.getSupportedLanguages()
      const currentLang = this.getCurrentLanguage()
      this.currentLanguageIndex = this.languageOptions.findIndex(lang => lang.code === currentLang)
      if (this.currentLanguageIndex === -1) {
        this.currentLanguageIndex = 0
      }
    },

    // 处理语言切换
    handleLanguageChange(event) {
      const selectedIndex = event.detail.value
      const selectedLanguage = this.languageOptions[selectedIndex]
      
      // 设置语言
      this.setLanguage(selectedLanguage.code)
      
      // 更新索引，这会触发组件key的变化，强制重新渲染所有子组件
      this.currentLanguageIndex = selectedIndex
      
      // 更新Vuex状态
      this.$store.commit('user/SET_CURRENT_LANGUAGE', selectedLanguage.code)
      
      // 显示切换成功提示
      this.$nextTick(() => {
        uni.showToast({
          title: this.$t('messages.operation_success', 'Operation successful'),
          icon: 'none'
        })
      })
    },

    // 设置语言（如果需要）
    async setupLanguageIfNeeded() {
      try {
        // 获取当前前端语言设置
        const currentFrontendLang = this.getCurrentLanguage()
        
        // 检查用户信息中的locale状态
        const userInfo = uni.getStorageSync('userInfo') || {}
        
        // 如果用户的locale为空或与前端语言不一致，需要更新后端语言设置
        if (!userInfo.locale || userInfo.locale !== currentFrontendLang) {
          // 调用后端接口设置语言
          const res = await systemApi.updateBackendMLocale(currentFrontendLang)
          if (res && res.code === 200) {
            // 更新本地用户信息中的locale
            userInfo.locale = currentFrontendLang
            uni.setStorageSync('userInfo', userInfo)
            // 同时更新Vuex中的用户信息
            await this.setUserInfo(userInfo)
          }
        }
      } catch (e) {
        console.error('Failed to set language:', e)
      }
    },
  },
  
  // 添加beforeDestroy生命周期钩子
  beforeDestroy() {
    // 组件销毁时停止背景音乐
    this.stopBackgroundMusic();
  },
  
  // uni-app中使用onUnload
  onUnload() {
    // 页面卸载时停止背景音乐
    this.stopBackgroundMusic();
  },
  
  // 页面隐藏时暂停背景音乐（可选）
  onHide() {
    if (this.backgroundMusic && this.isSetBGM) {
      this.backgroundMusic.pause();
    }
  },
  
  // 页面显示时恢复背景音乐（可选）
  onShow() {
    if (this.backgroundMusic && this.isSetBGM) {
      this.backgroundMusic.play();
    }
  },
};
</script>

<style scoped lang="scss">
.index-page {
  min-height: 100vh;
  margin: 0 auto;
  background: url(/static/img/index-bg.png) no-repeat;
  background-size: 100% 100%;
  overflow: auto;
  text-align: center;
  position: relative;
  padding-top: 40rpx;
  padding-bottom: 468rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.head-popup {
  position: relative;
  background: url(/static/img/info-bg.png) no-repeat;
  background-size: 100%;
  width: 514rpx;
  min-height: 388rpx;
  box-sizing: border-box;

  .close-img {
    position: absolute;
    width: 72rpx;
    height: 72rpx;
    right: -14rpx;
    top: 24rpx;
  }

  .title {
    color: #fef9e2;
    font-weight: 700;
    font-size: 34rpx;
    text-align: center;
  }

  .contents {
    height: 544rpx;
    padding: 30rpx 30rpx 14rpx 30rpx;

    .lists {
      width: 100%;
      height: 72rpx;
      border-bottom: 2rpx solid rgba(143, 200, 130, 0.3);
      color: #428243;
      font-size: 30rpx;
      font-weight: 700;
      position: relative;

      .head-img-wrap {
        width: 58rpx;
        height: 58rpx;
        background: #b95a3d;
        border: 4rpx solid #f8d286;
        border-radius: 8rpx;
        padding: 4rpx;
        box-sizing: border-box;
        overflow: hidden;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .right-icon {
        width: 12rpx;
        height: 20rpx;
        margin-left: 20rpx;
      }

      .text {
        color: #c47d41;
        font-size: 34rpx;
        font-weight: 700;
      }

      .level-img {
        width: 50rpx;
        height: 64rpx;
      }

      .set-img {
        height: 32rpx;
        width: 36rpx;
      }
    }
  }

  .cancel-btn {
    width: 260rpx;
    height: 80rpx;
    line-height: 66rpx;
    text-align: center;
    margin: 0 auto;
    background: url(/static/img/out-login.png) no-repeat;
    background-size: 100%;
    color: #fff;
    font-size: 28rpx;
    font-weight: 700;
  }
}

.pup-box {
  position: relative;
  background: url(/static/img/bg3.png) no-repeat;
  background-size: 100%;
  width: 267px;
  height: 275px;

  .close-img {
    position: absolute !important;
    width: 37px;
    height: 37px;
    right: -7px;
    top: 12px;
  }

  .title {
    color: #fef9e2;
    font-weight: 700;
    font-size: 17px;
    text-align: center;
  }

  .contents {
    height: 109px;
    padding-top: 30rpx;

    .inp-wrap {
      height: 76rpx;
      margin-top: 15px;
      background: #fddeaf;
      box-shadow: 0 2px 2px 0 rgba(103, 71, 23, 0.6);
      padding: 0 12px;

      .input {
        color: #c47d41;
        text-align: left;
        font-size: 16px;
        font-weight: 700;
        background: transparent;
        border: none;
        outline: none;
        flex: 1;
      }

      .img {
        width: 16px;
        position: relative;
        height: 16px;
        margin-right: 8px;
      }
    }
  }

  .btn {
    width: 93px;
    height: 41px;
    line-height: 32px;
    color: #fff;
    font-size: 15px;
    margin: 0 8px;
    text-align: center;
    cursor: pointer;

    &.cancel-btn {
      background: url(/static/img/chain-cancel-btn.png) no-repeat;
      background-size: 100%;
    }

    &.define-btn {
      background: url(/static/img/out.png) no-repeat;
      background-size: 100%;
    }
  }
}

.bgm-pup-box {
  position: relative;
  background: url(/static/img/bg3.png) no-repeat;
  background-size: 100%;
  width: 514rpx;
  height: 530rpx;

  .close-img {
    position: absolute !important;
    width: 72rpx;
    height: 72rpx;
    right: -14rpx;
    top: 24rpx;
  }

  .title {
    color: #fef9e2;
    font-weight: 700;
    font-size: 34rpx;
    text-align: center;
  }

  .contents {
    height: 240rpx;

    .volume-step {
      color: #428243;
      font-size: 34rpx;
      font-weight: 700;
      margin-top: 32rpx;
      margin-bottom: 22rpx;
    }

    .music-box {
      color: #428243;
      font-size: 34rpx;
      font-weight: 700;
      margin-bottom: 22rpx;
    }

    .language-box {
      color: #428243;
      font-size: 34rpx;
      font-weight: 700;
      
      .language-selector {
        color: #c47d41;
        font-size: 28rpx;
        font-weight: 700;
        margin-left: 24rpx;
        padding: 8rpx 16rpx;
        background: #fddeaf;
        border-radius: 8rpx;
        border: 2rpx solid #f8d286;
      }
    }

    .val-kuang {
      width: 52rpx;
      height: 52rpx;
      background: url(/static/img/icon-kuang.png) no-repeat;
      background-size: 100% 100%;
      margin-left: 24rpx;

      .select-img {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  .btn {
    background: url(/static/img/out-login.png) no-repeat;
    background-size: 100%;
    width: 260rpx;
    height: 80rpx;
    line-height: 66rpx;
    text-align: center;
    margin: 0 auto;
    background-size: 100%;
    color: #fff;
    font-size: 28rpx;
    font-weight: 700;
  }
}

.sign-out-pup-box {
  position: relative;
  background: url(/static/img/outlogin-bg.png) no-repeat;
  background-size: 100%;
  margin-top: -119px;

  .close-img {
    position: absolute !important;
    width: 37px;
    height: 37px;
    right: -7px;
    top: 12px;
  }

  .title {
    color: #fef9e2;
    font-weight: 700;
    font-size: 17px;
    text-align: center;
  }

  .contents {
    height: 106px;

    .text {
      color: #666;
      font-size: 15px;
      font-weight: 700;
      margin-top: 27px;
    }
  }

  .btn {
    width: 93px;
    height: 41px;
    line-height: 32px;
    color: #fff;
    font-size: 15px;
    margin: 0 8px;
    text-align: center;
    cursor: pointer;

    &.cancel-btn {
      background: url(/static/img/chain-cancel-btn.png) no-repeat;
      background-size: 100%;
    }

    &.define-btn {
      background: url(/static/img/out.png) no-repeat;
      background-size: 100%;
    }
  }
}
</style>
